<template>
  <div>
    ref控制数组
    <hr>
    <ul>
      <li v-for="el in goodsArr">{{ el }}</li>
    </ul>
    <hr>
    <ul>
      <li v-for="(el,index) in goodsArr">{{ el }} - {{ index+1 }}</li>
    </ul>
    <hr>
    <button @click="change1">修改第1个元素为西瓜</button>
    <button @click="onDel">删除最后一个</button>
  </div>
</template>

<script setup>
import { ref,unref } from 'vue';

//商品列表
const goodsArr = ref([
  "apple","pear","bananar"
]);

const change1 = ()=>{
  goodsArr.value[0] = "西瓜";
}
const onDel = ()=>{
  goodsArr.value.pop();
}

console.log(goodsArr);
console.log(unref(goodsArr));
console.log(goodsArr.value);
</script>

<style lang="scss" scoped>

</style>